<template>
    <style>
        .color {
            color: blueviolet;
        }
    </style>
    <p>my favorite color is: <strong class="color">blueviolet</strong></p>
</template>

<script>
    (function () { //创建闭包
        var element = Object.create(HTMLElement.prototype); // 基于HTML的原型创建对象
        var template = document.currentScript.ownerDocument.querySelector('template').content
        element.createdCallback = function () {
            var shadowRoot = this.createShadowRoot(); // 创建shadow root节点 // 作用域 js css html
            var clone = document.importNode(template, true)
            shadowRoot.appendChild(clone)
        }
        document.registerElement('x-color', {
            prototype: element
        })
    }())
    (function () {
        console.log('这里面也会执行')
    }())// 页面加载完之后立即执行{}里面的代码
    window.onload = function () {
        // 1不执行
    }
    window.onload = function () {
       // 2执行
    }
    // 文档加载完onload只会执行2里面的

</script>
